<template>
  <div>
    <div class="inputStr">
      <el-input v-model="pagination.queryContent" clearable style="width: 150px" placeholder="请输入试卷名"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin: 10px" v-model="pagination.queryContent"
                 @click="findPage">搜索
      </el-button>
    </div>
    <el-table
        v-loading="loading"
        :data="RandomPaperList"
        style="width: 100%">
      <el-table-column
          prop="paperName"
          label="试题名称"
          align="center">
      </el-table-column>
      <el-table-column
          prop="startCheck"
          align="center"
          label="考试时间">
      </el-table-column>
      <el-table-column
          prop="checkTime"
          align="center"
          label="时长(分钟)">
      </el-table-column>
      <el-table-column
          align="center"
          prop="grandScore"
          label="总分">
      </el-table-column>
      <el-table-column
          align="center"
          label="试卷类型">
        <template slot-scope="scope">
          <span>{{ scope.row.paperType == 1 ? '随机卷' : '手动卷' }}</span>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="状态">
        <template slot-scope="scope">
          <el-switch
              @change="changeStatus(scope.row.id)"
              v-model="scope.row.status"
              active-text=""
              inactive-text="">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          align="center"
          label="创建人">
        <template slot-scope="scope">
          <span v-html="scope.row.user.realName"></span>
        </template>
      </el-table-column>

      <el-table-column
          fixed="right"
          align="center"
          label="操作">
        <template slot-scope="scope">
          <el-button @click="querys(scope.row)" type="info" plain>查看</el-button>
          <el-button @click="findAnswerUser(scope.row.id,scope.row.paperName)" type="primary">考试档案</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-top: 40px">
      <el-pagination
          class="pagiantion"
          :total="total"
          @current-change="handleSelectionChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <el-dialog
        title="试卷详情"
        :visible.sync="centerDialogVisible"
        width="30%"
        :before-close="beforeGo"
        center>
      <div style="text-align: center">
        <el-tag size="medium" effect="dark">{{ randomPaper.paperName }}</el-tag>
        <span style="font-weight: bold"></span><br>
        <el-tag size="medium" style="margin-top: 10px">单选题数量-></el-tag>
        <span style="font-weight: bold">{{ randomPaper.radioNum }}</span>
        <el-tag size="medium" style="margin-top: 10px;margin-left: 30px">单选题分值-></el-tag>
        <span style="font-weight: bold;">{{ randomPaper.radioScore }}</span><br>
        <el-tag size="medium" style="margin-top: 10px">多选题数量-></el-tag>
        <span style="font-weight: bold">{{ randomPaper.multiNum }}</span>
        <el-tag size="medium" style="margin-top: 10px;margin-left: 30px">多选题分值-></el-tag>
        <span style="font-weight: bold">{{ randomPaper.multiScore }}</span><br>
        <el-tag size="medium" style="margin-top: 10px">判断题数量-></el-tag>
        <span style="font-weight: bold">{{ randomPaper.judgeNum }}</span>
        <el-tag size="medium" style="margin-top: 10px;margin-left: 30px">判断题分值-></el-tag>
        <span style="font-weight: bold">{{ randomPaper.judgeScore }}</span><br>
        <el-tag size="medium" style="margin-top: 10px">简答题数量-></el-tag>
        <span style="font-weight: bold">{{ randomPaper.shortAnswerNum }}</span>
        <el-tag size="medium" style="margin-top: 10px;margin-left: 30px">简答题分值-></el-tag>
        <span style="font-weight: bold">{{ randomPaper.shortAnswerScore }}</span><br>
        <!--            <el-tag size="medium" style="margin-top: 10px">总分-></el-tag><span style="font-weight: bold">{{randomPaper.grandScore}}</span><br>-->
        <el-tag size="medium" style="margin-top: 10px">开始考试时间-></el-tag>
        <span style="font-weight: bold">{{ randomPaper.startCheck }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
<!--    <el-button @click="centerDialogVisible = false">取 消</el-button>-->
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "AllPaper",
  data() {
    return {
      loading: false,
      num: 0,
      RandomPaperList: [],
      total: 0,
      centerDialogVisible: false,
      randomPaper: {},
      pagination: {
        currentPage: 1,
        pageSize: 5,
        queryContent: "",
        categoryId: null
      },
    }
  },
  mounted() {
    this.findPage();
  },
  methods: {
    findAnswerUser(paperId,paperName){
      this.$router.replace('/paper/userlist?paperId='+paperId+'&paperName='+paperName);
    },
    changeStatus(id) {
      this.axios.put("/paper/randomPaper/updateStatus/" + id).then(resp => {
        if (resp.data.statusCode == 200) {
          this.centerDialogVisible2 = false;
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          this.findPage();
        }
      })
    },
    closeAdd() {
      this.randomPaper = {};
      this.centerDialogVisible2 = false;
    },

    querys(randomPaper) {
      this.randomPaper = randomPaper;
      this.centerDialogVisible = true;

      //继续
    },
    handleSelectionChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage();
    },
    findPage() {
      this.loading = true;
      this.axios.post("/paper/allPaper/findPage", this.pagination).then(resp => {
        if (resp.data.statusCode == 200) {
          this.total = resp.data.data.total;
          //this.pagination.toal = resp.data.data.total;
          this.RandomPaperList = resp.data.data.data;
        }
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped>
.inputStr {
  width: 550px;
  margin-left: 500px;
}
</style>
